<template>
	<view style="width: 750rpx;padding:40rpx 30rpx 60rpx;background-color: #FFFFFF;">
		<text class="title">最新评论</text>
		<view class="body" v-for="(item,index) in list" :key='index' @tap="toAnswer" :data-commentid='item.commentId' :data-state='item.state' :data-all='true'>
			<view class="head">
				<image :src="item.userImage?item.userImage:'/static/img/toux2x.png'" @tap.stop="toPersonalDeail" :data-userid="item.userId"></image>
			</view>
			<view class="body_content">
				<text class="name">{{item.userName}}</text>
				<text class="comment">{{item.content}}</text>
				<view class="message" >
					<view class="time">
						{{item.addTime}}
					</view>
					<text class="dele" v-if="item.deleteState==0" @tap.stop="toDele" :data-answerid='item.answerId' :data-commentid='item.commentId' :data-state='item.state'>删除</text>
					<view class="comment_icon" @tap.stop="toAnswer" :data-commentid='item.commentId' :data-state='item.state'>
						<image src="/static/svg/comments.svg" mode=""></image>
						<text>{{item.discussNumber>0?item.discussNumber:'回复'}}</text>
					</view>
					<view class="assist" @tap.stop="toPraise" :data-commentid='item.commentId' :data-state='item.state' :data-index='index' :data-zan='item.zan' >
						<image :src="item.zan==0?praised:praise" mode=""></image>
						<text :class="{isDoed:item.zan==0}">{{item.zanNumber>0?item.zanNumber:'点赞'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-if="list.length<=0">
			<text>暂无评论</text>
		</view>
		<view class="lookMore" @tap="toMore" v-if="list.length>0">
			<text>查看更多</text>
			<image src="/static/svg/kanleyoukan.svg" mode=""></image>
		</view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	export default {
		props: {
			id: {
				type:String,
				default:""
			},
			list:{
				type:Array,
				default(){
				    return []
				}
			}
		},
		data() {
			return {
				inputShow:false,
				love:require('@/static/svg/love.svg'),
				loved:require('@/static/svg/love1.svg'),
				praise:require('@/static/svg/praise.svg'),
				praised:require('@/static/svg/praise1.svg'),
			}
		},
		methods: {
			toMore() {
				this.$emit("toMore")
			},
			toAnswer(e){
				if(e.currentTarget.dataset.all){
					uni.navigateTo({
						url: '/pages/homeDesign/allReply?commentId='+e.currentTarget.dataset.commentid+"&state="+e.currentTarget.dataset.state
					})
				}else{
					uni.navigateTo({
						url: '/pages/homeDesign/allReply?commentId='+e.currentTarget.dataset.commentid+"&isInput=true&state="+e.currentTarget.dataset.state
					})
				}
			},
			async toPraise(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.commentId=e.currentTarget.dataset.commentid
				data.userId=localStorage.getItem("userId")
				data.state=e.currentTarget.dataset.state
				if(e.currentTarget.dataset.zan!=0){
					let res=await urls.commentReplyFabulous(data)
					if(res.code==0){
						this.$emit('praise',e.currentTarget.dataset.index,true)
					}
				}else{
					let res=await urls.reduceCommentZan(data)
					if(res.code==0){
						this.$emit('praise',e.currentTarget.dataset.index,false)
					}
				}
			},
			toDele(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.showModal({
					content: '是否删除这条评论？',
					success:async res=> {
						if (res.confirm) {
							let data={}
							data.designId=e.currentTarget.dataset.answerid
							data.commentId=e.currentTarget.dataset.commentid
							data.state=e.currentTarget.dataset.state
							data.userId=localStorage.getItem("userId")
							let res1=await urls.deleteComment(data)
							if(res1.code==0){
								this.$emit("dele",1)
							}
						}
					},
				})
			},
		},
	}
</script>

<style lang="scss">
.title{
	font-size: 30rpx;
	color: #333333;
	letter-spacing: 1rpx;
	line-height: 30rpx;
	display: block;
	font-weight: bold;
	margin-bottom: 10rpx;
}	
.body{
	display: flex;
	width: 690rpx;
	padding:30rpx 0 40rpx;
	border-bottom: 1rpx solid #EEEEEE;
	.head{
		width: 72rpx;
		image{
			display: block;
			height: 72rpx;
			width: 72rpx;
			border-radius: 50%;
		}
		
	}
	.body_content{
		width: 597rpx;
		margin-left: 20rpx;
		.name{
			display: block;
			font-size: 28rpx;
			letter-spacing: 1rpx;
			color: #333333;
		}
		.comment{
			display: block;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #666666;
			letter-spacing: 1rpx;
			margin: 20rpx 0 32rpx;
		}
		.message{
			width:100% ;
			display: flex;
			align-items: center;
			position: relative;
			.time{
				font-size: 24rpx;
				color: #999999;
				letter-spacing: 1rpx;
				text{
					margin-left: 20rpx;
				}
			}
			.dele{
				font-size: 26rpx;
				color: #A66354;
				letter-spacing: 1rpx;
				margin-left: 30rpx;
			}
			.comment_icon{
				position: absolute;
				left: 373rpx;
				display: flex;
				align-items: center;
				image{
					height: 28rpx;
					width: 28rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 24rpx;
					color: #666666;
					letter-spacing: 1rpx;
				}
			}
			.assist{
				position: absolute;
				right: 0;
				display: flex;
				align-items: center;
				image{
					height: 28rpx;
					width: 28rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 24rpx;
					color: #666666;
					letter-spacing: 1rpx;
				}
				.isDoed{
					color: #B3392B;
				}
			}
		
		}
	}
}
.time>text:first-of-type{
	margin-left:0!important ;
}
.lookMore{
	height: 70rpx;
	width: 460rpx;
	background-color: #F6F6F6;
	border-radius: 8rpx;
	border: 1rpx solid #EDEDED;
	margin: 30rpx auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text{
		font-size: 26rpx;
		color: #272C32;
		line-height: 1rpx;
	}
	image{
		height: 28rpx;
		width: 28rpx;
		margin-left: 16rpx;
		position: absolute;
		right: 132rpx;
	}
}
.none{
	margin-top: 60rpx;
	display: flex;
	justify-content: center;
	text{
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
		letter-spacing: 1rpx;
		font-weight: bold;
	}
}
</style>
